<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>分类列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card class="box-card">
    <el-row>
      <el-button type="primary" icon="CirclePlus" @click="addCateDialog">添加分类</el-button>
    </el-row>
    <el-row>
      <el-table
          :data="tableData.data"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          default-expand
      >
        <el-table-column prop="id" label="ID" sortable/>
        <el-table-column prop="name" label="分类名称" sortable/>
        <el-table-column prop="level" label="分类等级" sortable>
          <template #default="scope">
            <el-tag v-if="scope.row.level === 1" type="success">一级</el-tag>
            <el-tag v-else-if="scope.row.level === 2" type="primary">二级</el-tag>
            <el-tag v-else type="warning">三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable>
          <template #default="scope">
            <el-button type="primary" icon="Edit" @click="">编辑</el-button>
            <el-button type="danger" icon="Delete" @click="">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </el-card>

  <!--  增加分类弹出窗-->
  <el-dialog v-model="addDialogVisible" title="增加分类" width="500" :before-close="cancelCate">
    <el-form :model="addForm" :rules="addRules" ref="addFormRef">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="父类节点" prop="id">
        <el-cascader
            v-model="value"
            :options="options.data"
            :props="props"
            @change="handleChange"
            separator="  >  "
            clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addCate">确定</el-button>
        <el-button @click="cancelCate">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import api from "@/api";
import {ElMessage} from "element-plus";

const addDialogVisible = ref(false)
const value = ref([])
const addFormRef = ref(null)
const tableData = reactive({
  data: []
})
const addForm = reactive({
  name: null,
  pid: 0,
  level: 1
})
const addRules = reactive({
  name: [
    {required: true, message: '请输入分类名称', trigger: 'blur'},
    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
  ]
})
const props = {
  expandTrigger: 'hover',
  label: 'name',
  value: 'id',
  checkStrictly: true,
}
const options = reactive({
  data: []
})

onMounted(() => {
  get_category()
  get_options()
})

const get_category = () => {
  api.get_category(3).then(res => {
    tableData.data = res.data.data
  })
}
const addCateDialog = () => {
  addDialogVisible.value = true
}

const handleChange = (value) => {
  if (value) {
    if (value.length === 1) {
      addForm.pid = value[0]
      addForm.level = 2
    } else if (value.length === 2) {
      addForm.pid = value[1]
      addForm.level = 3
    }
  }else{
    addForm.pid = 0
    addForm.level = 1
  }

}

const get_options = () => {
  api.get_category(2).then(res => {
    options.data = res.data.data
  })
}

const addCate = () =>{
  api.add_category(addForm).then(res =>{
    if (res.data.status === 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      })
      //关闭对话框
      addDialogVisible.value = false
      addFormRef.value.resetFields()
      value.value = []
      //重新获取数据
      get_category()
      get_options()
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'warning',
      })
    }
  })
}

const cancelCate = () =>{
  addDialogVisible.value = false
  addFormRef.value.resetFields()
  value.value = []
}

</script>

<style scoped>
.box-card {
  margin-top: 20px;
}
</style>